<template>
	<div>
		<div class="flex">
			<div class="yuan" style="text-align: center;">
				<div class="num1">1</div>
				<div class="word1">申请信息</div>
			</div>
			<div style="border: 2px solid #f2f2f2; width: 50px;margin-bottom: 20px;"></div>
			<div style="text-align: center;">
				<div class="num1">2</div>
				<div class="word1">证件上传</div>
			</div>
			<div style="border: 2px solid #f2f2f2; width: 50px; margin-bottom: 20px;"></div>
			<div>
				<div class="num">3</div>
				<div class="word">病例信息</div>
			</div>
		</div>
		<div class="back">
			<div class="flex1">
				<div class="people">蒋峰</div>
				<div class="hospital">已出院</div>
			</div>
			<div class="same" style="margin-top: -16rpx;">
				<span class="number">住院号</span>
				<span class="numn">400909</span>
			</div>
			<div class="same">
				<span class="number">入院时间</span>
				<span>2020/10/09</span>
			</div>
			<div class="same" style="padding-bottom: 26rpx;">
				<span class="number">出院时间</span>
				<span>2020/10/09</span>
			</div>
		</div>
		<div class="content">选择复印内容</div>
		<div class="same1">
			<div><span>病案首页</span><span class="org">(2元)</span></div>
			<div class="flex3">
				<div class="numb">
					-</div>
				<div style="padding: 0 15px;font-size: 14px;">2</div>
				<div class="numb">
					+</div>
			</div>
		</div>
		<div class="same1">
			<div><span>出院记录</span><span class="org">(3元)</span></div>
			<div class="flex3">
				<div class="numb">
					-</div>
				<div style="padding: 0 15px;font-size: 14px;">2</div>
				<div class="numb">
					+</div>
			</div>
		</div>
		<div class="same1">
			<div><span>入院记录</span><span class="org">(3元)</span></div>
			<div class="flex3">
				<div class="numb">-</div>
				<div style="padding: 0 15px;font-size: 14px;">2</div>
				<div class="numb">+</div>
			</div>
		</div>
		<div class="same1">
			<div><span>手术记录</span><span class="org">(1元)</span></div>
			<div class="flex3">
				<div class="numb">-</div>
				<div style="padding: 0 15px;font-size: 14px;">2</div>
				<div class="numb">+</div>
			</div>
		</div>
		<div class="same1">
			<div><span>麻醉记录</span><span class="org">(1元)</span></div>
			<div class="flex3">
				<div class="numb">-</div>
				<div style="padding: 0 15px;font-size: 14px;">2</div>
				<div class="numb">+</div>
			</div>
		</div>
		<div class="same1">
			<div><span>病理记录</span><span class="org">(1元)</span></div>
			<div class="flex3">
				<div class="numb">-</div>
				<div style="padding: 0 15px;font-size: 14px;">2</div>
				<div class="numb">+</div>
			</div>
		</div>
		<div class="same1">
			<div><span>化验报告</span><span class="org">(1元)</span></div>
			<div class="flex3">
				<div class="numb">-</div>
				<div style="padding: 0 15px;font-size: 14px;">2</div>
				<div class="numb">+</div>
			</div>
		</div>
		<div class="same1">
			<div><span>医嘱</span><span class="org">(4元)</span></div>
			<div class="flex3">
				<div class="numb">-</div>
				<div style="padding: 0 15px;font-size: 14px;">2</div>
				<div class="numb">+</div>
			</div>
		</div>
		<div style="height: 30px;"></div>
		<div class="fixed">
			<div class="total">
				<div style="font-size: 14px;"><span>合计:</span><span style="color: red;margin-left: 5px;">10.00</span>
				</div>
				<div class="close" @click="close">结算</div>
			
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
	
			}
		},
		methods: {
			close() {
				uni.navigateTo({
					url: "../../../hospitalizationServices/pages/send/close"
				})
			}
	
		}
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.fixed {
		padding: 0 15px;
		position: fixed;
		width: 100%;
		bottom: 0;
		background: #FFF;
	}

	.close {
		width: 50%;
		background: #006eff;
		text-align: center;
		padding: 10px 0;
		color: #FFF;
		font-size: 14px;

	}

	.numb {
		width: 20px;
		height: 20px;
		border: 1px solid #cdcdcd;
		color: blue;
		border-radius: 4px;
		text-align: center;
		line-height: 20px;
	}

	.total {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		border-top: 1px solid #f2f2f2;
	}

	.org {
		color: orange;
		margin-left: 5px;
	}

	.flex3 {
		display: flex;

	}

	.same1 {
		margin: 10px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f2f2f2;
		padding-bottom: 15px;
		font-size: 14px;
	}

	.content {
		margin: 0 15px;
		color: #AAAAAA;
		font-size: 15px;
		border-bottom: 1px solid #f2f2f2;
		padding-bottom: 15px;
	}

	.back {
		background: #f5f9ff;
		margin: 10px 15px;
		border-radius: 5px;
		border: 1px solid #f2f2f2;
	}

	.people {
		font-size: 18px;
		margin-left: 10px;
	}

	.hospital {
		font-size: 15px;
		color: #03CA82;
		background-color: rgba(3, 202, 130, 0.2);
		margin: 20px;
		border-radius: 25px;
		padding: 3px 10px;
		font-weight: bold;
	}

	.flex1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.number {
		font-size: 13px;
		padding-left: 10px;
		color: #AAAAAA;
		margin-right: 14px;
	}

	.same {
		margin: 10px 0;
		font-size: 14px;
	}

	.num {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		border: 1px solid;
		background: #006eff;
		color: #FFF;
		text-align: center;
		line-height: 30px;
		margin-left: 12px;
		font-size: 14px;
	}

	.num1 {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		border: 1px solid;
		background: #FFF;
		color: #aaaaaa;
		text-align: center;
		line-height: 30px;
		margin-left: 12px;
	}

	.word {
		font-size: 14px;
		margin-top: 8px;
		color: blue;
	}

	.word1 {
		font-size: 14px;
		margin-top: 8px;
		color: #aaaaaa;
	}

	.flex {
		margin-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.yuan {
		text-align: center;
	}
</style>